<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>v-model 修饰符</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <p>使用修饰符 .lazy 会变为在change 事件中同步（并不是实时改变，而是在失去焦点或者回车时才更新）</p>
        <input type="text" v-model.lazy="message" placeholder="请输入...">
        <p>您输入的内容是：{{ message }}</p>

        <hr/>
        <p>使用修饰符 .number 可以将输入转换为 mumber 类型，否则虽然你输入的是数字，但它的类型其实是String</p>
        <input type="text" v-model.number="numMsg" placeholder="请输入...">
        <p>您输入的数据类型是：{{ typeof numMsg }}</p>

        <hr/>
        <p>使用修饰符 .trim 可以自动过滤首尾的空格</p>
        <input type="text" v-model.trim="msg" placeholder="请输入...">
        <p>您输入的数据是：{{ msg }}</p>
    </div>
</body>

<script type="text/javascript">
    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!",
            numMsg:"",
            msg:""
        }
    })
</script>

</html>